/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-30 17:53:05
 */
<template>
      <div class="mapCon"   id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "@/components/Charts/chart";
import _ from "lodash";
var hoverImg = require("./mapHover.png");
var max = 0;
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value(res) {
      this.fetchMap(res);
    }
  },
  name: "index",
  components: { chart },
  mounted() {
    this.fetchMap();
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(res) {
      var data = [];
      var geoCoordMap = {};
      var toolTipData = [];
      var convertData = [];
      var orderCountArr = [];
      res.forEach(item => {
        var nameObj = {
          name: item.name,
          value: item.orderTurnover
        };
        data.push(nameObj);
        geoCoordMap[item.name] = [item.lng, item.lat];
        var newObj = {
          name: item.name,
          value: [
            { name: "交易额", value: item.orderTurnover },
            { name: "订单量", value: item.orderCount }
          ]
        };
        var conver = {
          name: item.name,
          value: [item.lng, item.lat, item.orderCount]
        };
        toolTipData.push(newObj);
        convertData.push(conver);
        orderCountArr.push(item.orderCount);
      });
      max = _.max(orderCountArr);
      var option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              width: 0,
              color: "transparent"
            }
          },
          backgroundColor: "transparent",
          extraCssText: "text-align:left,background-color:transparent",
          formatter: function(params, util) {
            var toolFirst =
              "<div style='position:relative;left:0'><img src=" +
              hoverImg +
              " style='width:313px;height:132px'>";
            var toolEnd = "</img></div>";
            var toolTiphtml =
              "<div style='position:absolute;left:140px;top:20px;color:#01f5ff'>";
            var utils = ["¥", ""];
            for (var i = 0; i < toolTipData.length; i++) {
              if (params.name === toolTipData[i].name) {
                toolTiphtml +=
                  "<div style='font-size:18px;margin-top:10px'>" +
                  toolTipData[i].name +
                  "</div>";
                for (var j = 0; j < toolTipData[i].value.length; j++) {
                  toolTiphtml +=
                    "<div style='margin-top: 10px'><span style='font-size:12px;'>" +
                    toolTipData[i].value[j].name +
                    "</span><span style='font-size:18px;margin-left:10px;font-family:DIN Condensed Bold'>" +
                    utils[j] +
                    "</span>" +
                    "<span style='font-size:23px;font-family:DIN Condensed Bold'>" +
                    toolTipData[i].value[j].value +
                    "</span>" +
                    "<br></div>";
                }
              }
            }
            return toolFirst + toolTiphtml + "</div>" + toolEnd;
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: max,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#0030b5", "#00d1ff"]
          }
        },
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#022545",
              borderColor: "#2d87c3"
            },
            emphasis: {
              areaColor: "#1e4274"
            }
          }
        },
        series: [
          {
            name: "credit_pm2.5",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData,
            symbolSize: function(val) {
              return 20;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9"
              }
            }
          },
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#022545",
                borderColor: "#2d87c3"
              },
              emphasis: {
                areaColor: "#1e4274"
              }
            },
            data: convertData
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData,
            symbolSize: function(val) {
              return 20;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#01f5ff",
                shadowBlur: 10,
                shadowColor: "#01f5ff"
              }
            },
            zlevel: 1
          }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
      var count = 0;
      var timeTicket = null;
      var dataLength = option.series[0].data.length;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function() {
        self.mapChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1
        });
        self.mapChart.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: count % dataLength
        });
        self.mapChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: count % dataLength
        });
        count++;
        if (count > 50) {
          count = 0;
        }
      }, 1000);
      // }, 1);
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 1030px;
  min-width: 1700px;
  float: left;
  position: fixed;
  top: 10px;
  /* left: -20px; */
}
</style>
